<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变背景_荐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .bg {
            --color1: #ff0084;
            --color2: #ff00fb;
            --color3: #c300ff;
            --color4: #8000ff;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(45deg, var(--color1), var(--color2), var(--color3));
        }

        .bg1 {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            background: linear-gradient(-45deg, var(--color2), var(--color3), var(--color4));
            animation: change1 5s linear infinite;
        }

        .bg2 {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--color3), var(--color2), var(--color1));
            opacity: 0;
            animation: change2 5s linear infinite;
        }

        .bg3 {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(-45deg, var(--color4), var(--color3), var(--color2));
            opacity: 0;
            animation: change3 5s linear infinite;
        }

        @keyframes change1 {
            0% {
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            75% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes change2 {
            0% {
                opacity: 0;
            }

            25% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            75% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes change3 {
            0% {
                opacity: 0;
            }

            25% {
                opacity: 0;
            }

            50% {
                opacity: 0;
            }

            75% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
    </div>
</body>

</html>